<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

const menuItems = [
  { name: 'Clipboard', path: '/', icon: 'ri-clipboard-line' },
  { name: 'AI Chat', path: '/ai-chat', icon: 'ri-robot-line' },
  { name: 'Settings', path: '/settings', icon: 'ri-settings-3-line' }
]
</script>

<template>
  <aside class="bg-base-200 border-r border-base-300 w-12 no-drag">
    <div class="flex flex-col items-center py-2">
      <nav>
        <ul class="menu menu-xs">
          <li v-for="item in menuItems" :key="item.path" class="mb-1">
            <router-link
              :to="item.path"
              class="w-8 h-8 flex items-center justify-center rounded-lg tooltip tooltip-right"
              :class="{ 'active': route.path === item.path }"
              :data-tip="item.name"
            >
              <i :class="[item.icon, 'text-base']"></i>
            </router-link>
          </li>
        </ul>
      </nav>
    </div>
  </aside>
</template>

<style scoped>
.router-link-active,
.active {
  @apply bg-primary text-primary-content;
}

.menu :where(li > *) {
  @apply rounded-lg;
}

.menu :where(li > *:not(ul)):hover {
  @apply bg-base-300;
}

.menu :where(li > *) {
  @apply py-0 px-0 min-h-0;
}

.no-drag {
  -webkit-app-region: no-drag;
}
</style> 